<template>
	<view class="my">
		<!-- 状态栏 -->
		<view class="status_bar"></view>
		<!-- 头部 -->
		<view class="hearder">
			<view class="hearder-left">
				<view class="head">
					<u-image width="120rpx" height="120rpx" border-radius="90rpx" :src="userInfo.avatar">
					</u-image>
				</view>
				<!-- 登录状态 -->
				<view class="hone" v-if="userInfo">
					<view class="myname">{{userInfo.username}}</view>
					<view class="bianji" @click="ToMyInfo">
						<text>编辑资料</text>
						<img class="bianjisvg" src="/static/image/bianji.svg"></img>
					</view>
				</view>
				<!-- 未登录状态 -->
				<view class="LoginBtn" v-else @click="ToLogin">
					<view class="title">未登录</view>
					<view class="txt">登录查看更多信息</view>
				</view>
			</view>
			<view class="hearder-right" @click="ToSet">
				<img class="setsvg" src="/static/image/shezhi.svg"></img>
			</view>
		</view>

		<!-- 内容 -->
		<view class="main">
			<view class="main-item" @click="ToCollect">
				<view class="main-left">
					<u-image width="28rpx" height="33rpx" src='/static/image/my01.svg'></u-image>
				</view>
				<view class="main-right">
					<text>我的收藏</text>
					<u-icon name="arrow-right" size="20rpx" color="#A6A6A6"></u-icon>
				</view>
			</view>

			<view class="main-item" @click="ToTicket">
				<view class="main-left">
					<u-image width="28rpx" height="33rpx" src='/static/image/my02.svg'></u-image>
				</view>
				<view class="main-right">
					<text>我的优惠</text>
					<u-icon name="arrow-right" size="20rpx" color="#A6A6A6"></u-icon>
				</view>
			</view>

			<view class="main-item" @click="ToAddress">
				<view class="main-left">
					<u-image width="28rpx" height="33rpx" src='/static/image/my03.svg'></u-image>
				</view>
				<view class="main-right">
					<text>我的地址</text>
					<u-icon name="arrow-right" size="20rpx" color="#A6A6A6"></u-icon>
				</view>
			</view>

			<button open-type="contact" class="main-item opbtn" @contact="kefu">
				<view class="main-left">
					<u-image width="28rpx" height="33rpx" src='/static/image/my04.svg'></u-image>
				</view>
				<view class="main-right">
					<text>联系客服</text>
					<u-icon name="arrow-right" size="20rpx" color="#A6A6A6"></u-icon>
				</view>
			</button>

			<view class="main-item" @click="ToCleanstaff">
				<view class="main-left">
					<u-image width="28rpx" height="33rpx" src='/static/image/my05.svg'></u-image>
				</view>
				<view class="main-right">
					<text>保洁师招募</text>
					<u-icon name="arrow-right" size="20rpx" color="#A6A6A6"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ResUserInfo } from '@/untils/api.js'
	export default {
		data() {
			return {
				userInfo: {},
				token: uni.getStorageSync('token') || ''
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {},
		methods: {
			kefu(e) {
				console.log(e);
			},
			// 获取用户信息
			async getUserInfo() {
				const { data: res } = await ResUserInfo()
				this.userInfo = res.data
				console.log(res, '用户信息');
			},

			ToCleanstaff() {
				uni.navigateTo({
					url: '/pages/Cleaner/Cleanstaff'
				})
			},
			ToLogin() {
				uni.navigateTo({
					url: '/pages/Login/Login'
				})
			},
			ToTicket() {
				uni.navigateTo({
					url: "/pages/Discount/Mydiscount?ispre=false"
				})
				uni.setNavigationBarTitle({
					title: '我的优惠券'
				})
			},
			ToSet() {
				if (!this.token) return uni.$showMsg('请先登录')
				uni.navigateTo({
					url: '/pages/My/Set'
				})

			},
			ToAddress() {
				let wayis = false
				uni.navigateTo({
					url: `/pages/Address/Address?wayis=${wayis}`
				})
			},
			ToCollect() {
				uni.navigateTo({
					url: '/pages/My/Collect'
				})
			},
			ToMyInfo() {
				uni.navigateTo({
					url: '/pages/My/MyInfo'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.my {
		height: 400rpx;
		padding: 20rpx 20rpx 0;
		background: linear-gradient(to right, #DEF6FE, #FEDAD8);

		.hearder {
			display: flex;
			justify-content: space-between;

			.hearder-left {
				display: flex;

				.hone {
					margin-left: 20rpx;

					.myname {
						font-size: 34rpx;
						margin-top: 10rpx;
						font-weight: 700;
					}

					.bianji {
						width: 161rpx;
						height: 51rpx;
						color: #F19BA5;
						font-size: 24rpx;
						margin-top: 20rpx;
						padding: 0 10rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-radius: 10rpx;
						border: 1px solid #F19BA5;

						.bianjisvg {
							width: 25rpx;
							height: 25rpx;
						}
					}
				}

				.LoginBtn {
					padding-top: 20rpx;
					margin-left: 30rpx;

					.title {
						font-weight: 700;
						font-size: 38rpx;
					}

					.txt {
						font-size: 24rpx;
						color: #858A89;
					}
				}
			}

			.hearder-right {
				.setsvg {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}


		.main {
			height: 930rpx;
			margin-top: 40rpx;
			padding: 40rpx 0 0 27rpx;
			box-sizing: border-box;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			background-color: #fff;

			.main-item {
				margin-top: 38rpx;
				display: flex;

				.main-right {
					flex: 1;
					margin-left: 34rpx;
					padding: 0 33rpx 38rpx 0;
					box-sizing: border-box;
					border-bottom: 1px solid #EFEFEF;
					display: flex;
					justify-content: space-between;
				}

			}

			.opbtn {
				padding: 30rpx 0 0 0;
				margin: 0;
				background-color: #fff;
				font-size: 28rpx;

				.main-right {
					padding-top: 20rpx;
					height: 80rpx;
					display: flex;
					align-items: center;
				}
			}

			button.opbtn::after {
				border: none;
			}
		}

	}
</style>
